<div class="container">
  <div class="row row-center" >
    <div  class="col-center">
      <div class="login-layout">
        <h3 class="login-title">登录管理系统</h3>
        <p style="margin: 10px 0;color:gray;">用户名: admin 密码: 123456</p>
        <form nz-form name="form" [formGroup]="validateForm" (ngSubmit)="onSubmit()">
          <nz-form-item>
            <nz-form-label [nzSpan]="4">用户名</nz-form-label>
            <nz-form-control 
              nzHasFeedback 
              [nzSpan]="20"
              nzErrorTip="请输入用户名"
            >
              <nz-input-group [nzSuffix]="suffixUsername">
                <input 
                  nz-input 
                  placeholder="请输入用户名" 
                  name="username" 
                  formControlName="username"
                  required 
                />
              </nz-input-group>
              <ng-template #suffixUsername>
                <i 
                  nz-icon 
                  class="ant-input-clear-icon" 
                  nzTheme="fill" 
                  nzType="close-circle" 
                  *ngIf="validateForm.controls.username.value.length>0" 
                  (click)="validateForm.controls.username.setValue('')"
                ></i>
              </ng-template>

            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="4">密&nbsp;&nbsp;&nbsp;&nbsp;码</nz-form-label>
            <nz-form-control 
              nzHasFeedback 
              [nzSpan]="20"
              nzErrorTip="请输入密码"
            >
              <nz-input-group [nzSuffix]="suffixPassword">
                <input 
                  nz-input 
                  name="password" 
                  formControlName="password"
                  [type]="passwordVisible ? 'text' : 'password'" 
                  placeholder="请输入密码" 
                  required
                />
              </nz-input-group>
              <ng-template #suffixPassword>
                <i 
                  nz-icon 
                  class="ant-input-clear-icon" 
                  nzTheme="fill" 
                  nzType="close-circle" 
                  *ngIf="validateForm.controls.password.value.length>0" 
                  (click)="validateForm.controls.password.setValue('')"
                ></i>
                <i 
                  nz-icon 
                  [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" 
                  (click)="passwordVisible = !passwordVisible"
                ></i>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control [nzSpan]="20" [nzOffset]="4">
              <div nz-row class="login-form-margin">
                <div nz-col [nzSpan]="12">
                  <label nz-checkbox formControlName="remember">
                    <span>记住我</span>
                  </label>
                </div>
                <div nz-col [nzSpan]="12" style="text-align: right;">
                  <a class="login-form-forgot">忘记密码?</a>
                </div>
              </div>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control [nzSpan]="24" [nzOffset]="0" style="text-align: center;">
              <button 
                type="submit"
                nz-button 
                style="width: 100px;" 
                nzType="primary"
              >登录</button>
            </nz-form-control>
          </nz-form-item>
        </form>



        <!-- {{validateForm.controls.username}}  -->

        <!-- <ul>
          <li *ngFor="let product of products; index as productId">
            <a [title]="product.name" (click)="jump(product.id)">
              {{ product.name }}
            </a>
          </li>
        </ul> -->

      </div>
    </div>
  </div>
</div>

